<style lang="scss" scoped>@import "./rules.scss";</style>

<template>
  <div class="app-container min-1250">
    <div class="table-wrapper">
      <el-tabs
        v-model="tabsActivity"
        type="border-card">
        <el-tab-pane label="金额规则" name="rule">
          <amount-rule @addRule="triggerDialog" ref='amountPane'></amount-rule>
        </el-tab-pane>
        <el-tab-pane label="品类规则" name="category">
          <category-rule @addRule="triggerDialog" ref='categoryPane' :categorys="categoryData"></category-rule>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 金额规则弹框 -->
    <el-dialog :visible.sync="showAmountDialog" :title="dialogTitle" destroy-on-close>
      <el-form :model="dialogData.data" label-width="150px" :rules="rules" ref="$$form">
        <el-form-item label="规则名称：" prop="ruleName">
          <el-input v-model="dialogData.data.ruleName" placeholder="请输入规则名称" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="优惠模式：">
          <el-select v-model="dialogData.data.discountMode">
            <el-option :label="mode.label" :value="mode.value" v-for="mode in DiscountsMode" :key="mode.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠类型：">
          <el-select v-model="dialogData.data.discountCategory">
            <el-option :label="type.label" :value="type.value" v-for="type in computeCategorys" :key="type.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="满减设置：" v-if="dialogData.data.discountCategory === 1" prop="fullMoney">
          <el-col style="width: 160px;">
            <el-input style="width: 150px" v-model="dialogData.data.fullMoney" clearable>
              <template slot="prepend">满</template>
            </el-input>
          </el-col>
          <el-col style="width: 160px;">
            <el-input style="width: 150px" v-model="dialogData.data.discountMoney" clearable>
              <template slot="prepend">减</template>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="立减设置：" v-if="dialogData.data.discountCategory === 2" prop="discountMoney">
          <el-col style="width: 160px;">
            <el-input style="width: 150px" v-model="dialogData.data.discountMoney" clearable>
              <template slot="prepend">减</template>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="折扣设置：" v-if="dialogData.data.discountCategory === 3" prop="discountMoney">
          <el-col style="width: 160px;">
            <el-input style="width: 150px" v-model="dialogData.data.discountMoney" clearable>
              <template slot="append">折</template>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="计算金额：">
          <el-select v-model="dialogData.data.calculateType">
            <el-option :label="calc.label" :value="calc.value" v-for="calc in CalculateType" :key="calc.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="doSave">{{dialogBtnTxt}}</el-button>
        <el-button @click="showAmountDialog = false">取消</el-button>
      </template>
    </el-dialog>

    <!--品类规则 弹框-->
    <el-dialog :title="dialogTitle" :visible.sync="showCategoryDialog" width="600px" destroy-on-close>
      <el-form :model="dialogData.data" label-width="150px" :rules="rules" ref="$$cate_form">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input v-model="dialogData.data.ruleName" placeholder="请输入规则名称" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="支持类目" prop="category">
          <el-col style="width: 160px">
            <el-cascader v-model="dialogData.data.category" :options="categoryData" :props="{ multiple: true, checkStrictly: true, emitPath: false }" collapse-tagsd></el-cascader>
          </el-col>
          <el-col style="width: 100px; margin-left: 20px;">
            <el-button icon="el-icon-plus" type="primary" @click="goCategoryList">增加</el-button>
          </el-col>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="doSaveCategoryRule">{{dialogBtnTxt}}</el-button>
        <el-button @click="showCategoryDialog = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import RulesMixin from './rules'
export default { mixins: [RulesMixin] }
</script>
